<template>
    <view class="container" :style="themeColor">
        <view class="title">当前自提点</view>
        <view class="default" v-for="(item, index) in datas" v-if="index == 0">
            <view class="flex-start">
                <image mode="aspectFill" :src="easyGetImgUrl(item.ImageUrl)" alt=""></image>
                <view class="info">
                    <view class="flex-s-s">
                        <view class="fs28">{{ item.TakeDeliveryName }}</view>
                        <label class="item-radio">
                            <custom-checkbox :isSelect="true"></custom-checkbox>
                        </label>
                    </view>
                    <view class="fs24">地址：{{ item.AddressDetail }}</view>
                </view>
            </view>
            <view class="bottom">
                <image class="b_bg" src="../../../static/img/navigation.png"></image>
                <view @click="call(item.ContactTel)"
                    ><iconsfont customIcons="icon-dianhua1" color="#333" size="40"></iconsfont
                    ><view>联系门店</view></view
                >
                <view @click="mapNav(item)"
                    ><iconsfont customIcons="icon-daohang1" color="#333" size="40"></iconsfont
                    ><view>导航到店</view></view
                >
            </view>
        </view>
        <view v-if="datas.length > 1">
            <view class="history">历史自提点</view>
            <view class="list" v-for="(item, index) in datas" v-if="index > 0">
                <image mode="aspectFill" :src="easyGetImgUrl(item.ImageUrl)" alt=""></image>
                <view class="info_right">
                    <view class="name">{{ item.TakeDeliveryName }}</view>
                    <view class="address">
                        <text>地址：{{ item.AddressDetail }}</text>
                        <view @click="checkFn(item)">选这个</view>
                    </view>
                </view>
            </view>
        </view>
        <view class="bottom-bar">
            <!-- #ifdef APP-PLUS -->
            <text class="btn btn-success" @click="goUrl('/pages_group/packet/map/map-poi?pagefrom=' + pagefrom)"
                >新增自提点</text
            >
            <!-- #endif -->
            <!-- #ifdef MP-WEIXIN -->
            <text class="btn btn-success" @click="goUrl('/pages_group/packet/map/map-poi-wx?pagefrom=' + pagefrom)"
                >新增自提点</text
            >
            <!-- #endif -->
        </view>
    </view>
</template>

<script>
import { GetTakeDeliveryList, GetUserTakeDeliveryPage, SaveUserTakeDelivery } from "@/service/api/takeDelivery.js"
import customCheckbox from "@/components/common/custom-checkbox.vue"

export default {
    components: {
        customCheckbox,
    },
    data() {
        return {
            datas: [],
            from: "",
            pagefrom: "",
        }
    },
    onLoad(e) {
        if (e.from) {
            this.from = e.from
        }
        if (e.pagefrom) {
            this.pagefrom = e.pagefrom
        }
    },
    mounted() {
        this.getList()
    },
    methods: {
        getList(e) {
            let param = {
                pageIndex: 1,
                pageSize: 20,
            }
            GetUserTakeDeliveryPage(param).then((res) => {
                if (res.Data) {
                    this.datas = res.Data
                }
            })
        },
        checkFn(e) {
            if (this.from == "selectBack") {
                //选择后带回信息
                const eventChannel = this.getOpenerEventChannel()
                eventChannel.emit("getSelectData", {
                    data: e,
                })
            }
            SaveUserTakeDelivery({ takeDeliveryId: e.ID }).then((res) => {
                if (res.State == 1) {
                    uni.navigateBack()
                }
            })
        },
        goUrl(url) {
            // this.easyGoTo(url)
            this.easyRemoveCurrentGoTo(url)
        },
        call(phone) {
            uni.makePhoneCall({
                phoneNumber: phone,
            })
        },
        mapNav(item) {
            // #ifdef APP-PLUS
            this.openMapRoute(+item.Latitude, +item.Longitude, item.ContactAddress)
            // #endif
            // #ifdef MP-WEIXIN
            this.openMapWX(+item.Latitude, +item.Longitude, item.ContactAddress)
            // #endif
        },
        openMapWX(lat, lon, cityName) {
            uni.openLocation({
                // 传入你要去的纬度
                latitude: lat,
                // 传入你要去的经度
                longitude: lon,
                // 传入你要去的地址信息 不填则为空
                address: cityName,
                // 缩放大小
                scale: 18,
                success: function () {
                    console.log("成功的回调success")
                },
            })
        },
        openMapRoute(lat, lon, cityName) {
            var url = ""
            if (plus.os.name == "Android") {
                var hasBaiduMap = plus.runtime.isApplicationExist({
                    pname: "com.baidu.BaiduMap",
                    action: "baidumap://",
                })
                var hasAmap = plus.runtime.isApplicationExist({
                    pname: "com.autonavi.minimap",
                    action: "androidamap://",
                })
                var urlBaiduMap =
                    "baidumap://map/marker?location=" + lat + "," + lon + "&title=" + cityName + "&src=婚梯"
                var urlAmap =
                    "androidamap://viewMap?sourceApplication=婚梯&poiname=" +
                    cityName +
                    "&lat=" +
                    lat +
                    "&lon=" +
                    lon +
                    "&dev=0"
                if (hasAmap && hasBaiduMap) {
                    plus.nativeUI.actionSheet(
                        {
                            title: "选择地图应用",
                            cancel: "取消",
                            buttons: [
                                {
                                    title: "百度地图",
                                },
                                {
                                    title: "高德地图",
                                },
                            ],
                        },
                        function (e) {
                            switch (e.index) {
                                case 1:
                                    plus.runtime.openURL(urlBaiduMap)
                                    break
                                case 2:
                                    plus.runtime.openURL(urlAmap)
                                    break
                            }
                        },
                    )
                } else if (hasAmap) {
                    plus.runtime.openURL(urlAmap)
                } else if (hasBaiduMap) {
                    plus.runtime.openURL(urlBaiduMap)
                } else {
                    url = "geo:" + lat + "," + lon + "?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82"
                    plus.runtime.openURL(url) //如果是国外应用，应该优先使用这个，会启动google地图。这个接口不能统一坐标系，进入百度地图时会有偏差
                }
            } else {
                // iOS上获取本机是否安装了百度高德地图，需要在manifest里配置，在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加（如urlschemewhitelist:["iosamap","baidumap"]）
                plus.nativeUI.actionSheet(
                    {
                        title: "选择地图应用",
                        cancel: "取消",
                        buttons: [
                            {
                                title: "Apple地图",
                            },
                            {
                                title: "百度地图",
                            },
                            {
                                title: "高德地图",
                            },
                        ],
                    },
                    function (e) {
                        switch (e.index) {
                            case 1:
                                url =
                                    "http://maps.apple.com/?q=%e6%95%b0%e5%ad%97%e5%a4%a9%e5%a0%82&ll=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&spn=0.008766,0.019441"
                                break
                            case 2:
                                url =
                                    "baidumap://map/marker?location=" +
                                    lat +
                                    "," +
                                    lon +
                                    "&title=" +
                                    cityName +
                                    "&src=婚梯"
                                break
                            case 3:
                                url =
                                    "iosamap://viewMap?sourceApplication=婚梯&poiname=" +
                                    cityName +
                                    "&lat=" +
                                    lat +
                                    "&lon=" +
                                    lon +
                                    "&dev=0"
                                break
                            default:
                                break
                        }
                        if (url != "") {
                            plus.runtime.openURL(url, function (e) {
                                plus.nativeUI.alert("本机未安装指定的地图应用")
                            })
                        }
                    },
                )
            }
        },
    },
    computed: {},
}
</script>

<style lang="scss">
page {
    background: #ffffff;
}
.container {
    padding: $app-page-padding;
    padding-bottom: 130rpx;
}
.title {
    width: 208rpx;
    height: 60rpx;
    background: $app-color-main;
    border-radius: 24rpx 0px 24rpx 0px;
    font-size: 32rpx;
    color: #ffffff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 24rpx;
}
.default {
    background: #fffcfc;
    border-radius: 12rpx;
    border: 1rpx solid $app-color-main;
    margin: 0 16rpx;
    padding: 16rpx;
    image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 12rpx;
        margin-right: 16rpx;
    }
    .info {
        flex: 1;
        height: 140rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }
    .fs28 {
        font-size: 28rpx;
        font-weight: bold;
    }
    .fs24 {
        font-size: 24rpx;
        color: #666;
    }
    .bottom {
        position: relative;
        height: 88rpx;
        display: flex;
        align-items: center;
        justify-content: start;
        background: linear-gradient(270deg, #eaf0f5 0%, #fbfeff 100%);
        margin: 18rpx -16rpx -16rpx -16rpx;
        border-radius: 0px 0px 12rpx 12rpx;
        & > view {
            position: relative;
            width: 50%;
            height: 88rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            view {
                margin-left: 12rpx;
                font-size: 28rpx;
            }
        }
        .b_bg {
            width: 100%;
            height: 88rpx;
            position: absolute;
            left: 0;
            bottom: 0;
            z-index: 0;
        }
    }
}
.history {
    font-size: 32rpx;
    font-weight: bold;
    margin: 48rpx 0 34rpx 24rpx;
}
.list {
    background: #f9f9f9;
    border-radius: 12rpx;
    margin: 0 16rpx 24rpx 16rpx;
    padding: 16rpx;
    display: flex;
    image {
        width: 140rpx;
        height: 140rpx;
        border-radius: 12rpx;
        margin-right: 16rpx;
    }
    .info_right {
        flex: 1;
        height: 140rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .name {
            font-size: 28rpx;
            font-weight: bold;
        }
        .address {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-bottom: 8rpx;
            text {
                flex: 1;
            }
            view {
                width: 110rpx;
                height: 42rpx;
                background: $app-color-main;
                border-radius: 23rpx;
                font-size: 24rpx;
                color: #ffffff;
                display: flex;
                justify-content: center;
                align-items: center;
                margin-left: 24rpx;
            }
        }
    }
}
.bottom-bar {
    .btn {
        width: 100%;
        margin-left: 0;
        height: 88rpx;
        font-size: 32rpx;
    }
}
</style>
